<template>
  <div class="search flex-start">
    <div class="date">
      <label for="">姓名</label
      ><input class="searchInput" type="text" placeholder="请输入姓名"  v-model="uname"/>
    </div>
    <div class="type">
      <label for="">手机号码</label
      ><input class="searchInput" type="text" placeholder="请输入手机号" v-model="uphone" />
    </div>
    <div class="btnbox flex-start">
      <div class="btn-white2 cp" @click="reset">重置</div>
      <div class="btn-blue2 cp" @click="search">查询</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname: this.$store.state.userManage.params.userName,
      uphone: this.$store.state.userManage.params.userPhone
    }
  },
  computed: {
    // userName () {
    //   return this.$store.state.userManage.params.userName
    // },
    // userPhone () {
    //   return this.$store.state.userManage.params.userPhone
    // }

  },
  methods: {
    reset () {
      this.uname = null
      this.uphone = null
    },
    search () {
      this.$store.commit('userManage/set_page', 1)
      this.$store.commit('userManage/set_size', 10)
      this.$store.commit('userManage/set_userName', this.uname)
      this.$store.commit('userManage/set_userPhone', this.uphone)
      this.$store.dispatch('userManage/getTableData').catch(err => {
        this.$message({
          type: 'error',
          message: err,
          duration: 1000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  width: 100%;
  height: 80px;
  background-color: #fff;
  margin-top: 20px;
  position: relative;
  font-size: 14px;
  color: #3d4966;
  border-radius: 8px;
  div {
    label {
      margin-right: 12px;
    }
  }
  .date {
    margin-left: 36px;
  }
  .type {
    margin-left: 20px;
  }
  .btnbox {
    height: 100%;

    position: absolute;
    right: 24px;
    .btn-white2 {
      margin-right: 20px;
    }
  }
}
</style>
